<template>
  <div id="app">
    <Topbar :key="Topbarkey"></Topbar>
    <Header></Header>
    <router-view @Topbarkey='TopbarkeyFn' />
    <Login v-show="loginIsShow"></Login>
    <Footed></Footed>
      <transition name="slide">
    <Toast v-show="isShowToast"></Toast>{{isShowToast}}
      </transition>
      <button @click="fn">发送精品请求</button>
  </div>
</template>
<script>
import Footed from '@/components/Footed.vue'
import Topbar from '@/components/Topbar.vue'
import Header from '@/components/Header.vue'
import Login from '@/components/Login.vue'
import Toast from '@/components/Toast.vue'


// import axios from 'axios'
// import request from '@/request/request'
import {JingpinAPI} from "@/request/api"
import { mapState } from 'vuex'
export default {
  data(){
    return {
      Topbarkey:0
    }
  },
  watch:{
    '$route.path':{
      handler(newVal,oldVal){
       if (oldVal!=='/') {
         this.Topbarkey++
       }
        // console.log(this.Topbarkey);
      }
    }
  },
    computed:{
      ...mapState({
        loginIsShow:state=>state.model.loginIsShow,
        isShowToast:state=>state.isShowToast.isShowToast
      })
    },
    components:{
    Header,
    Topbar,
    Footed,
    Login,
    Toast
    },
methods:{
  // 触发自定义事件修改key值
  TopbarkeyFn(){
   this.Topbarkey++
   console.log('触发了',TopbarkeyFn);
  },
  
  async fn(){
     let res = await JingpinAPI();
}
},

    async created(){


      let res = await JingpinAPI();
      console.log(res);
      // JingpinAPI().then((res)=>{
      //   console.log(res);
      // })
      // 解决回调地狱
      
    }

}
</script>
<style lang="less">
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity 1s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}

</style>
